<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-tabs v-model="activeName">
          <el-tab-pane label="角色管理" name="first">
            <!-- 新增角色按钮 -->
            <el-row style="height: 60px">
              <el-button icon="el-icon-plus" size="small" type="primary" @click="showDialogHandler()">新增角色</el-button>
            </el-row>
            <!-- 表格 -->
            <el-table border :data="roleList">
              <el-table-column type="index" label="序号" width="120" />
              <el-table-column prop="name" label="角色名称" width="240" />
              <el-table-column prop="description" label="描述" />
              <el-table-column label="操作">
                <!-- 方式一 -->
                <!-- default是插槽的名字，scope是子组件传递给父组件的作用域插槽数据 -->
                <!--   <template v-slot:default="scope"> -->
                <!-- 方式二 -->
                <!-- <template slot-scope="scope"> -->
                <template slot-scope="{ row }">
                  <el-button size="small" type="success" @click="assignPer(row.id)">分配权限</el-button>
                  <el-button size="small" type="primary" @click="showDialogHandler(row.id)">编辑</el-button>
                  <el-button size="small" type="danger" @click="delRole(row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页组件 -->
            <el-row type="flex" justify="end" align="middle" style="height: 60px">
              <el-pagination :current-page="query.page" :page-size="query.pagesize" :total="total" layout="prev,pager,next" @current-change="handleCurrentChange" />
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="公司信息" name="second">
            <el-form label-width="120px" style="margin: 20px 30px">
              <el-form-item label="公司名称">
                <el-input v-model="companyInfo.name" disabled style="width: 400px" />
              </el-form-item>
              <el-form-item label="公司地址">
                <el-input v-model="companyInfo.companyAddress" disabled style="width: 400px" />
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input v-model="companyInfo.mailbox" disabled style="width: 400px" />
              </el-form-item>
              <el-form-item label="备注">
                <el-input v-model="companyInfo.remarks" type="textarea" :rows="2" disabled style="width: 400px" />
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-card>
      <!-- 添加或者修改角色的组件-->
      <edit-role ref="editRoleRef" :role-list="roleList" :show-dialog.sync="showDialog" @edit-role-success="getRoleList()" />
      <!-- 分配权限的组件 -->
      <assign-permission ref="assignPerRef" />
    </div>
  </div>
</template>

<script>
// 导入逻辑模块
import Setting from './setting.js'
export default {
  ...Setting
}
</script>

<style lang="scss" scoped>
// 引入组件的样式文件,自动会进行样式的穿透设置
@import url('./index.scss');
</style>
